<template>
	<view class="box_bg" :style="{ backgroundImage: 'url(' + imgUrl + ')' }">
		<uni-nav-bar :fixed="fixed" :border="false" :statusBar="true"
			:backgroundColor="isBackGround ? '#3e6ff0' : imgUrl ? 'transparent' : '#fff'"
			:color="isBackGround ? '#fff' : '#000'" :height="height">
			<!-- 中间 -->
			<view class="center">
				<view class="center_title" v-if="title">{{ title }}</view>
				<slot name="center"></slot>
			</view>
			<!-- 左侧插槽 -->
			<template v-slot:left>
				<view v-if="leftIcon" class="left" @click="$emit('onLeftIcon')">
					<uni-icons :type="leftIcon" size="20" :color="isBackGround ? '#fff' : '#000'"></uni-icons>
				</view>
				<slot name="left"></slot>
			</template>
			<!-- 右侧插槽 -->
			<template v-slot:right>
				<view v-if="rightIcon" class="right" @click="$emit('onRightIcon')">
					<uni-icons :type="rightIcon" size="30" :color="isBackGround ? '#fff' : '#000'"></uni-icons>
				</view>
				<slot name="right"></slot>
			</template>
		</uni-nav-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			title: {
				type: String,
				default: "",
			},
			leftIcon: {
				type: String,
				default: "",
			},
			rightIcon: {
				type: String,
				default: "",
			},
			isBackGround: {
				type: Boolean,
				default: true,
			},
			height: {
				type: Number,
				default: 45,
			},
			fixed: {
				type: Boolean,
				default: false,
			},
			imgUrl: {
				type: String,
				default: "",
			},
		},
	}
</script>

<style lang="scss">
	.box_bg {
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 100;
	}

	.center {
		margin: 0 auto;
		align-self: center;
		font-size: 14px;

		.center_title {
			font-size: 14px;
			font-weight: 600;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	}
</style>